<template>
  <div>
    <div class="lottery-container">
      <div class="turntable-wrap">
        <div
          :class="['border', item.className]"
          v-for="item in borders"
          :key="item"
        >
          <div class="dot" v-for="item in 5" :key="item"></div>
        </div>
        <div class="goods-container">
          <div class="goods-list-wrap">
            <div
              :class="['goods-item-wrap', { active: curActive === index }]"
              v-for="(item, index) in goods"
              :key="index"
            >
              <div class="goods-img">
                <img :src="item.src" alt="" />
              </div>
              <div class="goods-name">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="cost-wrap">
        <div class="turntable-btn btn-0" @click="onStart">
          <div>单抽</div>
          <svg-icon name="ks"></svg-icon> <span>200</span>
        </div>
        <div class="turntable-btn btn-1" @click="onGet">
          <div>十连抽</div>
          <svg-icon name="ks"></svg-icon> <span>2000</span>
        </div>
      </div>
      <div v-if="showResult" class="result-container">
        <div class="mask"></div>
        <div class="model">
          <h2>恭喜抽中{{ goods[curActive].name }}</h2>
          <img :src="goods[curActive].src" alt="" />
          <p>{{ goods[curActive].desc }}</p>
          <div class="get-btn" @click="onGet">收下奖励</div>
        </div>
      </div>
    </div>
  </div>
  <img
    src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/32ed6a7619934144882d841761b63d3c~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp"
    alt=""
  />
</template>
<script setup lang="ts">
import { computed, ref } from "vue";
interface Props {
  /** 宽度 */
  width: string;
  /** 高度 */
  height: string;
}
const props = withDefaults(defineProps<Props>(), {});

const borders = [
  { className: "upper-border up-down" },
  { className: "lower-border up-down" },
  { className: "left-border left-right" },
  { className: "right-border left-right" },
];
const goods = [
  {
    desc: "本次抽中的矿石已累加到你的当前矿石数中",
    probability: 10,
    name: "随机矿石",
    src: "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/32ed6a7619934144882d841761b63d3c~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp",
  },
  {
    desc: "本次抽中的Bug已累加到你的当前Bug数中",
    probability: 10,
    name: "Bug",
    src: "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a4ce25d48b8405cbf5444b6195928d4~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp",
  },
  {
    desc: "请注意查收站内信，填写实物奖励地址与联系方式",
    probability: 10,
    name: "「码赛克」掘金贴纸",
    src: "https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/77d5e1e091a944b1b894029d22cdfcf0~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp?",
  },
  {
    desc: "请注意查收站内信，填写实物奖励地址与联系方式",
    probability: 10,
    name: "「码赛克」线圈毛巾",
    src: "https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/77b634472b7f4700a4060edbd8cb3cf3~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp?",
  },
  {
    desc: "请注意查收站内信，填写实物奖励地址与联系方式",
    probability: 10,
    name: "「解码」棒球帽",
    src: "https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ffdb6abdc4c0475280108d785cf6ad80~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp?",
  },
  {
    desc: "请注意查收站内信，填写实物奖励地址与联系方式",
    probability: 10,
    name: "九阳养生电热水壶",
    src: "https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b4826808d48547fd966ceec758d8b7c5~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp?",
  },
  {
    desc: "请注意查收站内信，填写实物奖励地址与联系方式",
    probability: 10,
    name: "九阳多功能空气炸锅",
    src: "https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5e19a99c0b2a43399e9cedf6d235405f~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp?",
  },
  {
    desc: "请注意查收站内信，填写实物奖励地址与联系方式",
    probability: 100,
    name: "摩飞便携榨汁杯",
    src: "https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b37abce75e5c4539b5c9f4395f6d05e6~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp?",
  },
  {
    desc: "请注意查收站内信，填写实物奖励地址与联系方式",
    probability: 10,
    name: "Switch",
    src: "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/215f7217aa3a48dfa4dbb69976e92b1b~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp",
  },
];

const showResult = ref(false);

const curActive = ref<any>(-1);

const probArr = computed(() => {
  return goods.map((item) => item.probability);
});

function onStart() {
  let interval = setInterval(() => {
    curActive.value = Math.floor(Math.random() * 9);
  }, 20);
  let timer = setTimeout(() => {
    curActive.value = winPrize(probArr.value);
    showResult.value = true;
    clearInterval(interval);
    clearTimeout(timer);
  }, 2000);
}

function onGet() {
  showResult.value = false;
  curActive.value = -1;
}

function winPrize(arr: number[]) {
  let sum = eval(arr.join("+")); // 获取总概率区间
  for (let i = 0; i < arr.length; i++) {
    let random = parseInt(Math.random() * sum); // 获取 0-总概率区间的一个随随机整数
    if (random < arr[i]) {
      return i; //如果在当前的概率范围内,得到的就是当前概率
    } else {
      sum -= arr[i]; //否则减去当前的概率范围,进入下一轮循环
    }
  }
}
</script>
<style lang="scss" scoped>
.lottery-container {
  width: 473px;
  height: 502px;
  background: #fadd95;
  box-shadow: inset 0 0 16px #ff9a2e;
  border-radius: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0 auto;

  .turntable-wrap {
    width: 100%;
    flex: 1;
    position: relative;

    .upper-border {
      top: 0;
    }

    .lower-border {
      bottom: 0;
    }

    .left-border {
      left: 0;
    }

    .right-border {
      right: 0;
    }

    .left-right {
      position: absolute;
      top: 8px;
      display: flex;
      align-items: center;
      width: 24px;
      height: calc(100% - 16px);
      justify-content: space-between;
      flex-direction: column;

      .dot {
        &:first-child,
        &:last-child {
          visibility: hidden;
        }
      }
    }

    .up-down {
      position: absolute;
      left: 8px;
      display: flex;
      align-items: center;
      height: 24px;
      width: calc(100% - 16px);
      justify-content: space-between;
    }

    .border {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;

      .dot {
        border-radius: 50%;
        box-sizing: border-box;
        width: 12px;
        height: 12px;
        background: #e37815;

        &:nth-child(2n + 2) {
          border: 1.5px solid #fff7e8;
          background: transparent;
        }

        &:nth-child(3) {
          background: #fff;
        }
      }
    }

    .goods-container {
      width: 100%;
      height: 100%;
      padding: 26px;
      box-sizing: border-box;

      .goods-list-wrap {
        width: 100%;
        height: 100%;
        background: #e37815;
        border-radius: 8px;
        padding: 16px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        flex-direction: row;
        align-content: space-between;

        .goods-item-wrap {
          width: calc(33.33333% - 5.33333px);
          height: calc(33.33333% - 5.33333px);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background: #fdf3f3;
          border-radius: 4px;
          position: relative;
          user-select: none;

          &.active {
            background: #f5dd9e;
          }

          .goods-img {
            height: 50px;
            width: 72px;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
              max-width: 40px;
              max-height: 40px;
              height: 100%;
            }
          }

          .goods-name {
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
            color: #d25f00;
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }

  .cost-wrap {
    width: 100%;
    height: 106px;
    box-sizing: border-box;
    padding: 12px 24px;
    display: flex;
    // align-items: center;
    justify-content: space-between;

    .turntable-btn {
      width: 204px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, #ffb46f 15.1%, #ef7d13);
      box-shadow: 0 8px 0 #d25f00;
      border-radius: 16px;
      cursor: pointer;

      &:active {
        background: #e17a2a;
      }

      > div {
        font-size: 20px;
        color: #fff;
        margin-right: 10px;
        font-weight: bold;
      }

      > span {
        font-size: 20px;
        color: #faf1be;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 500;
        line-height: 32px;
        max-width: 100%;
        margin-left: 4px;
      }
    }
  }
}

.result-container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  .mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    top: 0;
  }

  .model {
    min-width: 400px;
    min-height: 332px;
    background: #fff;
    border-radius: 12px;
    position: relative;
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 0;

    h2 {
      font-size: 20px;
      color: #d25f00;
      font-weight: 500;
      line-height: 28px;
      padding-top: 32px;
    }

    img {
      width: 88px;
      padding-top: 24px;
      padding-bottom: 32px;
    }

    p {
      font-size: 14px;
      color: #515767;
      margin: 0 0 4px;
      padding: 0;
      line-height: 24px;
    }

    .get-btn {
      margin-top: 20px;
      margin-bottom: 32px;
      padding: 0;
      width: 200px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      background-color: #1e80ff;
      border-radius: 50px;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
    }
  }
}
</style>
